<template>
	<view class="zy_content">
		<view id="zy_column_view" v-for="(item,index) in contentlist" :key="index" class="zy_list">
			<view v-for="(citem,cindex) in item.list" :key="cindex" class="zy_card" @tap="goodsDetail(citem)">
				<image @load="showcontent" @error="showcontent"  :src="citem.big" :key="cindex" mode="widthFix"></image>
				<!-- <view class="name" v-if="cindex==1 && index==1">立刻电视机分厘卡圣诞节反抗拉萨附近但是积分卡洛杉矶的克里夫</view> -->
				<view class="name">{{ citem.goods_name }}</view>
				<view class="info">
					<view class="price">￥{{ formatPrice(citem.cost) }}</view>
					<view class="slogan">{{ checkBuyCount(citem.buy_count) }}人已购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			flowlist:{
				type:Array
			}
		},
		data() {
			return {
				//渲染内容列表 (左右两列)
				contentlist:[
					{
						list:[]
					},
					{
						list:[]
					}
				]
			};
		},
		methods:{
			//渲染列表
			showcontent(){
				const index = this.contentlist.reduce(function(total,current){
					return total + current.list.length
				},0);
				// console.log('index',index)
				if(index>this.flowlist.length-1) {
					this.$emit('flowend')
				    return
				};
				const query = uni.createSelectorQuery().in(this);
				let flag = 0;
				query.selectAll('#zy_column_view').boundingClientRect(data => {
					// console.log(data[0].bottom,data[1].bottom)
					// flag = data[0].bottom - data[1].bottom>0?1:0;
					flag = data[1].bottom - data[0].bottom>0?0:1;
					// console.log(flag,index)
				    this.contentlist[flag].list.push(this.flowlist[index])
				}).exec()
			},
			//初始化
			zyinit(){
				this.contentlist =[{list:[]},{list:[]}];
				setTimeout(()=>{
					this.showcontent();
				},0)
			},
			goodsDetail(good){
				uni.navigateTo({
					url:"/pages/goods/goods?goods_id="+good.goods_id
				})
			},
			checkBuyCount(buyCount){
				let str
				let count = buyCount
				if(count>=0 && count<10000){
					return count
				}else if(count>=10000){
					let extendStr = count/10000
					let reslut = extendStr.toFixed(1)
					str = reslut+"万"
					return str
				}else{
					return 0
				}
			},
			formatPrice(price) {
			  if (typeof price !== 'number') return price
			  return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			}
		},
		mounted() {
		    if(this.flowlist.length){
				setTimeout(()=>{
					 this.zyinit()
				},200)
		    }
		}
	}
</script>

<style style="scss">
	.zy_content{
		width: 100%;
		/* height: 100%; */
		background-color: transparent;
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-evenly;
		align-items:flex-start;
		box-sizing: border-box;
		padding-bottom: 30px;
	}
	.zy_list{
		width: 45%;
		display:flex;
		flex-direction:column;
	}
	.zy_card{
		width: 100%;
		background-color: #fefefe;
		overflow: hidden;
		border-radius: 20upx;
		box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
	}
	.zy_card image{
		width: 100%;
		min-height: 100rpx;
		max-height: 560rpx;
		margin-bottom:5rpx;
	}
	/* 底部卡片内容 */
	.zy_bottom_view{
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}
	.zy_type_view{
		display: inline-block;
		background-color: #fff3f3;
		margin-bottom: 10rpx;
		color: #e36161;
		font-size: 18rpx;
		padding: 2rpx 5px;
		border-radius:0 5rpx;
		margin-left: 5%;
	}
	.name {
		width: 100%;
		padding: 5upx 4% 10upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-align: justify;
		overflow: hidden;
		font-size: 28rpx;
	}
	.info {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 92%;
		padding: 10upx 0 10upx 3%;
	}
	.price {
		color: #e65339;
		font-size: 28upx;
		font-weight: 600;
	}
	.slogan {
		color: #807c87;
		font-size: 20upx;
	}
</style>
